import { View, Image } from "@tarojs/components";
import { Uploader } from '@antmjs/vantui'
import uploadIcon from '@/assets/images/upload-icon.png'
import useInitAction from "@/hooks/useInitAction";
import useUploadPhotoAction from "@/hooks/useUploadPhotoAction";
import './editPhoto.scss'
import { Suspense, useEffect, useState } from "react";
import Taro from "@tarojs/taro";
import { RESPONSE_CODE, STORE_KEY } from "@/common/config";

import {  handleInitStoreBaseInfo, photosAreEqual, showToast } from "@/common/util";
import { IUserProfileEditPromise, USER_PROFILE_STATUS } from "@/typing";
import useProfileInfoAction from "@/hooks/useProfileInfoAction";
import PendingPop from "@/components/pendingPop/pendingPop";


const EditPhoto: React.FC = () => {
    // const[hasEditPhoto,setHasEditPhoto] = useState(false)
    const { handleShopUserprofileEdit } = useProfileInfoAction()

    const [pendingPopShow, setPendingPopShow] = useState(false)

    const { photoList, handleFormatPhotoList, handleAfterUploadPhoto, handleDeletePhotoAction, setPhotoList, handleInitStorePhotoList, handleInitStoreOriginPhotoList } = useUploadPhotoAction()
    const { bottomSafeHeight } = useInitAction()
    const handleInitPhoto = () => {
        const storePhotoList = JSON.parse(Taro.getStorageSync(STORE_KEY.PHOTO_LIST) || '[]')
        if (storePhotoList.length > 0) {

            const storePhotoListT = handleFormatPhotoList(storePhotoList)
            setPhotoList(storePhotoListT)
        }
    }
    const handleCommonEditAction=async(computedPhotoObj,editType=1)=>{
        
        const editRes = await handleShopUserprofileEdit({ ...computedPhotoObj }) as IUserProfileEditPromise
        Taro.hideLoading({

        })
        if(editType ===2){
            const storeBaseUserInfo = handleInitStoreBaseInfo()
            storeBaseUserInfo['modify_field']['media_img'] = USER_PROFILE_STATUS.disable
            Taro.setStorageSync(STORE_KEY.BASE_USER_INFO, JSON.stringify(storeBaseUserInfo))
        }
        
        const {  msg, code,data } = editRes
        showToast(msg)
        if (code === RESPONSE_CODE.SUCCESS) {
            const storeBaseUserInfo = handleInitStoreBaseInfo()
            storeBaseUserInfo['modify_field']['media_img'] = USER_PROFILE_STATUS.disable
            Taro.setStorageSync(STORE_KEY.BASE_USER_INFO, JSON.stringify(storeBaseUserInfo))
            if(data.status ===USER_PROFILE_STATUS.pending ){
                setPendingPopShow(true)
            }else{
                Taro.navigateBack()
            }
            // Taro.navigateBack()
            // setPendingPopShow(true)
        }
        // Taro.navigateBack()
    }
    const handleSavePhoto = async() => {
        const storePhotoList = handleInitStorePhotoList()

        const storeOriginPhotoList = handleInitStoreOriginPhotoList()

     

        const hasEditInfo = photosAreEqual(storePhotoList, storeOriginPhotoList)
        
        const computedPhotoObj = {}

        storePhotoList.forEach((photo, index) => {
            const keyVal = `media_img[${[index]}]`

            computedPhotoObj[keyVal] = photo
        })
        if(hasEditInfo.type ===1){
            if(hasEditInfo.flag){
                Taro.showModal({
                    title: '提示',
                    content: '确定修改图片吗？',
                    success: async function (res) {
                        if (res.confirm) {
                            handleCommonEditAction(computedPhotoObj,2)
                        } else if (res.cancel) {
                            console.log('用户点击取消')
                        }
                    }
                })
            }else{
                Taro.navigateBack()
            }

        }else{
            if(hasEditInfo.flag){
                Taro.showModal({
                    title: '提示',
                    content: '确定修改图片吗？',
                    success: async function (res) {
                        if (res.confirm) {
                            handleCommonEditAction(computedPhotoObj,2)
                        } else if (res.cancel) {
                            console.log('用户点击取消')
                        }
                    }
                })

            }else{
                handleCommonEditAction(computedPhotoObj)
                // Taro.navigateBack()
               
            }
        }
       
    }
    const handleCallBack = () => {
        setPendingPopShow(false)
           Taro.navigateBack()
   }
    useEffect(() => {

        handleInitPhoto()

    }, []);
    return <>
        <View className="w-full box-border min-h-100vh bg-#F6F6F6 pt-60px" >
            <View style={{ paddingBottom: bottomSafeHeight > 0 ? bottomSafeHeight + 46 + 'px' : '160rpx' }}>
                <View className="box-border " style={{ paddingLeft: photoList.length > 0 ? '40rpx' : '60rpx', paddingRight: photoList.length > 0 ? '30rpx' : '58rpx' }}>
                    <Uploader accept='image' multiple={true} maxCount={9} fileList={photoList} onAfterRead={handleAfterUploadPhoto} onDelete={handleDeletePhotoAction}>
                        <View className=" box-border bg-#fff flex flex-col items-center justify-center" style={{ width: photoList.length > 0 ? '208rpx' : '631rpx', height: photoList.length > 0 ? '306rpx' : '364rpx' }}>
                            <Image src={uploadIcon} className="w-58px h-60px" />

                        </View>
                    </Uploader>

                </View>

            </View>
            <View className="fixed bg-#fff left-0 bottom-0 right-0 pt-20px z-10" style={{ paddingBottom: bottomSafeHeight > 0 ? bottomSafeHeight + 'px' : '50rpx' }}>
                <View className=" w-592px h-92px flex mx-auto items-center justify-center text-#fff text-30px font-medium bg-#8232E8" onClick={handleSavePhoto}>保存</View>
            </View>

        </View>
        <Suspense>
            <PendingPop show={pendingPopShow} disableText='图片' callBack={handleCallBack}></PendingPop>
        </Suspense>
    </>
}

export default EditPhoto;